<script setup lang="ts">
import { getSwipeFn,getProListFn,gettypeSwipeFn,kindProListFn, getnameListFn } from '@/api/home'; 
import { computed, ref } from 'vue';
import type{ Ref } from 'vue';
import { reactive } from 'vue';
import { watch } from 'vue';
import { onMounted } from 'vue';
import type{ iKindPro, iState,iName } from '@/type/homeType';
import { useRouter } from 'vue-router';
const router =useRouter()
const state: iState = reactive({
  swipeData: [],
  kindData:[],
  kindProData:[],
  nameListData:[]
});
const active:Ref<number> = ref(0);
const issearch:Ref<boolean>=ref(false)
const value=ref('')

  getProListFn().then(res=>{
    console.log(res);
    
  })
  getnameListFn().then(res=>{
    console.log(res.data);
    state.nameListData =res.data.nameList
    console.log(state.nameListData);
    list.value =state.nameListData
  })
  state.kindData = gettypeSwipeFn();
  if (state.kindData.length > 0) {
    kindProListFn({ typename: state.kindData[0].typename }).then(res => {
      console.log(res);
      state.kindProData = res.data;
    });
  }
onMounted(() => {
  state.swipeData=getSwipeFn()
  state.kindData= gettypeSwipeFn()
  watch(active, (newVal) => {
    if (newVal >= 0 && newVal < state.kindData.length) {
      const typename = state.kindData[newVal].typename;
      kindProListFn({ typename }).then(res => {
        console.log(res);
        state.kindProData = res.data;
      });
    }
  });
  })
const classtype=computed(()=>{
  
  return issearch.value==true?"my-search2":"my-search"
})
function cancelCilck(){
setTimeout(() => {
  issearch.value=false
  value.value=''
}, 0);
}
function swipeClick(item:iKindPro){
  const arr={
          bed: item.bed,
          kind:item.kind,
          price: item.price,
          start:item.start,
          img:item.img,
          proid:item.proid
}
  const historyarrays = ref(JSON.parse(localStorage.getItem('historyarrays')) || []);
  for (let i = 0; i < historyarrays.value.length; i++) {
    if(historyarrays.value.proid==item.proid ){
      historyarrays.value.splice(i,1)
    }
  }
  historyarrays.value.push(arr)
  localStorage.setItem('historyarrays', JSON.stringify( historyarrays.value));
  console.log(localStorage.getItem('historyarrays'))
  
 router.push(   {
     name: 'detail',
        query: {
          bed: item.bed,
          kind: item.kind,
          price: item.price,
          start:item.start,
          img:item.img,
          proid:item.proid
        }
})
}
function hosterClick(item:iName){
  router.push(   {
     name: 'homedetail',
        query: {
          img: item.img,
          like: item.like,
          location: item.location,
          name: item.name,
          text: item.text,
        }
      })
}
function onClickTab(typename: string) {
  console.log(typename);
  
  kindProListFn({  typename }).then(res => {
    console.log(res);
    state.kindProData=res.data
    // 你可以在这里处理 API 返回的数据，比如更新某个状态
  })
}
function historyClick(){
  router.push('/history')
}
function collectClick(){
  router.push('/collect')
}
function hostersClick(){
  router.push('/hoster')
}
const list =ref<iName[]>([]);

console.log(list);

function uploadMessage(){
  const namelist= ref<iName[]>([]);
  console.log(value.value);

  for (let i = 0; i < state.nameListData.length; i++) {
    if(state.nameListData[i].text.indexOf(value.value)!=-1){
      
      namelist.value.push(state.nameListData[i])
      
      console.log(namelist.value);
  
    }
    
  }
  list.value=namelist.value
  
  
}
</script>
<template>
<main class="box">
  <header class="header">
      <slot name="left"></slot>
      <span>头部-首页</span>
      <slot name="right"></slot>
  </header>
  <div class="content"> 
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
  <van-swipe-item  v-for="item in state.swipeData":key=item.Swipid><img :src="item.imgurl" alt=""></van-swipe-item>
  
</van-swipe>
<van-search 
:class="classtype" 
@update:model-value="uploadMessage()" 
@click="issearch=true" 
v-model="value" 
placeholder="搜索" 
show-action
background="rgba(255, 0, 0, 0)" 
shape="round" >
<template #action>
    <div v-show="issearch==true" class="cancel" @click="cancelCilck">取消</div>
  </template>
</van-search>
<van-grid class="grid">
  <van-grid-item  color="#ffb5c2" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u292.svg" text="附近房源" />
  <van-grid-item @click="collectClick" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u307.svg" text="收藏" />
  <van-grid-item @click="historyClick" icon-color="#1296db" icon="todo-list" text="浏览记录" />
  <van-grid-item @click="hostersClick" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u313.svg" text="成为房东" />
</van-grid>
<div class="hot">
 <div class="hottitle">热门目的地</div>
 <van-tabs v-model:active="active"  @click-tab="onClickTab(state.kindData[active].typename)" >
  <van-tab v-for="item in state.kindData" :key=item.typeid :title="item.typename"><div class="hotbox">
    <div @click="swipeClick(item)" class="hottotal"  :key=item.proid v-for="item in state.kindProData">
  <img class="hotimg" :src="item.img" alt="">
  <div class="hotbed">整套公寓-{{ item.bed }}张床</div>
  <div class="hotprice">￥{{ item.price }}/晚</div>
  <div ><van-rate v-model="item.start" readonly /><span class="hotstart">{{item.start  }}</span></div>
  </div>
  </div></van-tab>
</van-tabs>
</div>
<div class="hoster">
<div class="hostertitle">房东故事</div>
<div class="hosterAll">
  <div class="hosterbox" @click="hosterClick(item)"  v-for="item in list" :key=item.name  >
  <img class="hosterimg" :src="item.img" alt="">
  <div><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u282.svg" /><span class="hosterlocation">{{ item.location }}</span></div>
  <div class="hostertext">{{ item.text }}</div>
  <div class="hosterboxb"><div class="left"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg" /><span>{{ item.name }}</span></div><div class="right"><van-icon size="24px" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u287.png" /><span> {{ item.like }}</span></div></div>
 
</div>
</div>

</div>
</div>
</main>
</template>

<style lang="scss" scoped>
.box{
  background-color: #fbfbfb;
}
.my-swipe {
  height: 2.6rem;
  line-height: 2.6rem;
  width: 100%;

  img {
    width: 100%;
    height: 100%;
  }
}
.my-search{
  position: relative;
  bottom: 56px;
  border-radius: 10px;
}
.my-search2{
  width: 90%;
  position: relative;
  bottom: 56px;
  border-radius: 10px;
}
.cancel{
  color: #55b8cc;
}
.grid{
 margin-top: -50px;
}
.hottitle{
  font-size: 20px;
  font-weight: 800;
  padding: 0 10px;

}

.hoster{
width: 100%;
  .hostertitle{
  font-size: 20px;
  font-weight: 800;
  padding: 0 10px;
}
  .hosterAll{
  
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .hosterbox{
      border: 1px solid #cccccc;
  background-color: white;
  width: 46%;
      .hosterimg{
    width: 100%;
  }
  .hosterlocation{
   position: relative;
    font-size: 16px;
    bottom: 3px;
    left: 15px;
    box-sizing: border-box;
  }
 
.hostertext{
  font-size: 14px;
}
.hosterboxb{
  .left{
float: left;
}
.right{
  float: right;
}
}
    }
   
}
 
}
.hotbox{
  width: 100%;
  .hottotal{
    float: left;
    padding-right: 0.08rem;
    padding-left: 0.08rem;
  .hotbed{
    font-size: 12px;
  }
  .hotimg{
  width: 1.7rem;
  height: 1.2rem;
}
.hotprice{
  font-size: 14px;
  padding: 5px 0;
  font-weight: 400;
}
.hotstart{
  font-size:16px;
  display: inline-block;
  margin: 0 4px 15px;
}
}
}

</style>
